<style>
  .sys-banner-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      @on-close="cancel"
      :closable="false"
      :title="title"
      width="40%">
      <Form
        ref="sysBannerDrawer"
        :model="row"
        :rules="ruleInline"
        style="width: 100%; margin-left: 50px; margin-top: 30px;"
        :label-width="100">
        <FormItem prop="title" label="标题：" style="width: 300px;">
          <Input type="text" v-model="row.title" placeholder="请输入标题" />
        </FormItem>
        <FormItem prop="url" label="banner图片：" style="width: 300px;">
          <upload-img @upload-success="handleUpload" :folder="folder" :row="row"></upload-img>
        </FormItem>
        <!-- <FormItem prop="taskid" label="关联任务：" style="width: 80%">
          <Select v-model="row.taskid">
            <Option v-for="item in taskList" :value="item.id" :key="item.id">
              {{ item.name }}
            </Option>
          </Select>
        </FormItem> -->
        <FormItem prop="time" style="width: 80%" label="起始日期：">
          <DatePicker v-model="row.time" format="yyyy-MM-dd" type="daterange" style="width: 200px;" placeholder="请选择起始时间"></DatePicker>
        </FormItem>
        <FormItem prop="sort" label="排序：" style="width: 300px;">
          <Input type="text" v-model="row.sort" placeholder="请输入序号" />
        </FormItem>
        <FormItem prop="state" label="是否开启：" style="width: 300px">
          <i-switch v-model="row.openState" style="margin-left: 30px;" />
        </FormItem>
      </Form>
      <div class="sys-banner-drawer-footer">
        <Button style="margin-right: 8px" @click="cancel">取消</Button>
        <Button type="primary" @click="handleSubmit">确认发送</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import UploadImg from '_c/upload-img'
export default {
  name: 'SysBannerDrawer',
  components: {
    UploadImg
  },
  data () {
    const validateDate = (rule, value, callback) => {
      const start = value ? value[0] : ''
      const end = value ? value[1] : ''
      if (start === '' && end === '') {
        callback(new Error('请选择起始日期！'))
      } else {
        callback()
      }
    }
    return {
      title: '',
      loading: true,
      imgUrl: '',
      time: [],
      folder: 'banner',
      ruleInline: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ],
        time: [
          {
            validator: validateDate,
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '序号不能为空',
            trigger: 'blur'
          }
        ]
        // name: [
        //   { required: true, message: '姓名不能为空', trigger: 'blur' }
        // ],
        // tel: [
        //   { required: true, message: '手机号不能为空', trigger: 'blur' }
        // ]
      }
    }
  },
  updated () {
    if (this.row.id && this.row.id !== '') {
      this.title = '编辑banner'
    } else {
      this.title = '添加banner'
    }
  },
  computed: {
    ...mapState({
      row: state => state.sysBanner.row,
      modalState: state => state.modal.modalState
      // taskList: state => state.taskList.taskList
    })
  },
  methods: {
    ...mapActions(['updateModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.sysBannerDrawer.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('sys-banner-valid', {
          id: this.row.id,
          title: this.row.title,
          url: this.row.url,
          begintime: (this.row.time && this.row.time[0]) ? this.$moment(this.row.time[0], this.$moment.ISO_8601).format('YYYY-MM-DD') : '',
          endtime: (this.row.time && this.row.time[1]) ? this.$moment(this.row.time[1], this.$moment.ISO_8601).format('YYYY-MM-DD') : '',
          // time: this.row.time && this.row.time[0] ? [this.$moment(this.row.time[0], this.$moment.ISO_8601).format('YYYY-MM-DD HH:mm:ss'), this.$moment(this.row.time[1], this.$moment.ISO_8601).format('YYYY-MM-DD HH:mm:ss')] : this.time,
          // taskid: this.row.taskid,
          sort: this.row.sort !== undefined ? parseInt(this.row.sort) : '',
          state: this.row.openState === true ? 0 : 1
        })
      })
    },
    cancel () {
      this.updateModalState(false)
      this.$refs['sysBannerDrawer'].resetFields()
    },
    handleUpload (url) {
      this.row.url = url
    }
  }
}
</script>
